<template>
    <div v-if="showHeader" class="header flex-row flex-center">
<!--        <div class="page-name">首页</div>-->
        <div class="flex1"></div>
        <div class="icon-list flex-row flex-item">
            <i @click="toHome" class="el-icon el-icon-house"></i>
<!--            <i class="el-icon el-icon-refresh-left"></i>-->
<!--            <i class="el-icon el-icon-bell"></i>-->
            <el-dropdown @command="handleCommand">
                <div class="user-info">
                    <span>{{ baseInfo.realName }}</span>
                    <i class="el-icon el-icon-arrow-down"></i>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="name">修改用户名</el-dropdown-item>
                    <el-dropdown-item command="oldPassString">修改密码</el-dropdown-item>
                    <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-dialog
                    :title="editMode === 'name' ? '修改用户名' : '修改密码'"
                    width="500px"
                    @open="reset"
                    :visible.sync="visible">
                <el-form :model="userInfoForm" ref="userInfoForm" :rules="rules" label-width="80px">
                    <el-form-item v-if="editMode === 'name'" label="用户名" prop="realName">
                        <el-input :maxlength="100" show-word-limit v-model="userInfoForm.realName"></el-input>
                    </el-form-item>
                    <template v-else>
                        <el-form-item label="原密码" prop="oldPassString">
                            <el-input v-model="userInfoForm.oldPassString" type="password"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" prop="newPassString">
                            <el-input v-model="userInfoForm.newPassString" type="password"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="newPassString2">
                            <el-input v-model="userInfoForm.newPassString2" type="password"></el-input>
                        </el-form-item>
                    </template>
                </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="visible = false">取 消</el-button>
                    <el-button size="mini" type="primary" @click="saveForm">确 定</el-button>
                  </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'pageHeader',
  data() {
    return {
      visible: false,
      editMode: '',
      userInfoForm: {
        realName: '',
        oldPassString: '',
        newPassString: '',
        newPassString2: ''
      },
      rules: {
        realName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        oldPassString: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          { min: 6, message: '密码至少6个字符', trigger: 'blur' }
        ],
        newPassString: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码至少6个字符', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (value === this.userInfoForm.oldPassString) {
              return callback(new Error('新老密码不能为相同值'));
            } else {
              callback();
            }
          }, trigger: 'blur' }
        ],
        newPassString2: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (value !== this.userInfoForm.newPassString) {
              return callback(new Error('新密码两次输入不一致'));
            } else {
              callback();
            }
          }, trigger: 'blur' }
        ],
      }
    }
  },
  mounted() {
    this.userInfoForm.realName = this.baseInfo.realName
  },
  methods: {
    ...mapActions('userInfo', ['updateUserInfo']),
    reset() {
      this.userInfoForm = {
        realName: this.baseInfo.realName,
        oldPassString: '',
        newPassString: '',
        newPassString2: ''
      }
      this.$refs.userInfoForm?.resetFields()
    },
    saveForm() {
      if (this.editMode === 'name') {
        this.saveUserName()
      } else if (this.editMode === 'oldPassString') {
        this.savePassString()
      }
    },
    saveUserName() {
      this.$refs.userInfoForm.validate((valid) => {
        if (valid) {
          this.$http.post('/sys/user/updateUserInfo', {
            userId: this.baseInfo.userId,
            realName: this.userInfoForm.realName
          }).then(() => {
            this.visible = false
            this.$TZmessage.success('修改成功')
            this.updateUserInfo()
          }).catch(err => {
            this.$TZmessage.error(err.msg || '修改失败')
          })
        } else {
          return false;
        }
      })
    },
    savePassString() {
      const _this = this
      this.$refs.userInfoForm.validate((valid) => {
        if (valid) {
          const { newPassString, oldPassString } = this.userInfoForm
          this.$http.post('/sys/user/update/password', { newPassword: newPassString, password: oldPassString }).then(() => {
            _this.visible = false
            this.$TZmessage.success('修改成功')
          }).catch(err => {
            this.$TZmessage.error(err.msg || '修改失败')
          })
        } else {
          return false;
        }
      })
    },
    toHome() {
      if (this.$route.path !== '/home') {
        this.$router.replace('/home')
      }
    },
    handleCommand(command) {
      this.editMode = command
      if (command === 'loginOut') {
        window.location.href = `${window.location.origin}/login`
      } else if (command === 'oldPassString'){
        this.visible = true
      } else if (command === 'name'){
        this.visible = true
      }
    }
  },
  computed: {
    ...mapState('userInfo', ['baseInfo']),
    showHeader() {
      return this.$route.path !== '/screen'
    }
  }
}
</script>

<style lang="scss" scoped>
    .header {
        /*min-width: 800px;*/
        height: 56px;
        flex-shrink: 0;
        background: #F0F2F5;
        font-size: 18px;
        box-sizing: border-box;
        padding: 20px;
        .page-name {
        }
        .icon-list {
            .el-icon {
                cursor: pointer;
                margin: 10px;
                font-size: 18px;
                color: #989BA7;
            }
            .user-info {
                font-size: 16px;
                margin-left: 10px;
            }
        }
    }
    @media print {
        .header {
            display: none;
        }
    }
</style>